<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>datagrid</title>
<link rel="stylesheet" type="text/css" href="easyui-1.3.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui-1.3.5/themes/icon.css">
<style type="text/css">
#fm {
	margin: 0;
	padding: 10px 30px;
}

.ftitle {
	font-size: 14px;
	font-weight: bold;
	color: #666;
	padding: 5px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
}

.fitem {
	margin-bottom: 5px;
}

.fitem label {
	display: inline-block;
	width: 80px;
}

.easyui-validatebox {
	background-image: none;
}
</style>
</style>
<script type="text/javascript" src="easyui-1.3.5/jquery.min.js"></script>
<script type="text/javascript" src="easyui-1.3.5/jquery.easyui.min.js"></script>
</head>

<body>
<div id="toolbar">
	<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">添加用户</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑用户</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">删除用户</a>
</div>
<table id="dg" title="My Users" class="easyui-datagrid" url="get_users.php" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true">
	<thead>
		<tr>
			<th field="firstname" width="50">First Name</th>
			<th field="lastname" width="50">Last Name</th>
			<th field="phone" width="50">Phone</th>
			<th field="email" width="50">Email</th>
		</tr>
	</thead>
</table>
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px" closed="true" buttons="#dlg-buttons">
	<div class="ftitle">用户信息</div>
	<form id="fm" method="post" novalidate>
		<div class="fitem">
			<label>First Name:</label>
			<input name="firstname" class="easyui-validatebox" required="true">
		</div>
		<div class="fitem">
			<label>Last Name:</label>
			<input name="lastname" class="easyui-validatebox" required="true">
		</div>
		<div class="fitem">
			<label>Phone:</label>
			<input name="phone">
		</div>
		<div class="fitem">
			<label>Email:</label>
			<input name="email" class="easyui-validatebox" validType="email">
		</div>
	</form>
</div>
<div id="dlg-buttons">
	<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>
<div id="error">

</div>
<script type="text/javascript">
var url; //提交数据访问的url
/**
 *打开添加用户对话框
 */
function newUser() {
	var dlg = $("#dlg");
	dlg.dialog('open'); //打开对话框
	dlg.dialog('setTitle', '添加用户'); //设置标题
	var fm = $("#fm");
	fm.form('clear'); //清空form的数据
	url = "save_user.php"
}
/**
 *添加用户
 */
function saveUser() {
	console.log("开始保存");
	$('#fm').form('submit', {
		url: url,
		onSubmit: function() {
			return $(this).form('validate');
		},
		success: function(result) {
			var result = eval('(' + result + ')');
			if(result.success) {
				$("#dlg").dialog('close');
				$("#dg").datagrid('reload');
			} else {
				$.messager.show({
					title: 'Error',
					msg: result.msg
				})
			}
		}
	});
}

/**
 * 编辑用户
 */
function editUser() {
	var row = $('#dg').datagrid('getSelected');
	debugger;
	if(row) {
		$('#dlg').dialog('open').dialog('setTitle', '编辑用户');
		$('#fm').form('load', row);
		url = 'update_user.php?id=' + row.id;
	}
}
/**
 * 删除用户
 */
function removeUser() {
	var row = $('#dg').datagrid('getSelected');
	if(row) {
		$.messager.confirm('确认', '你确定移除这个用户吗?', function(r) {
			if(r) { //点击后为true
				$.post('remove_user.php', {
					id: row.id
				}, function(result) {
					if(result.success) {
						$('#dg').datagrid('reload');
					} else {
						$.messager.show({
							title: 'Error',
							msg: result.msg
						});
					}
				}, 'json');
			}
		});
	}
}
</script>
</body>

</html>